<template>
  <el-dialog width="80%" :title="id===null?'新增':'修改'" :visible.sync="visible" :before-close="close" @open="open">
    <div style="margin: 20px">
      <el-form :model="form" :rules="rules">
        <el-form-item v-if="this.id" label="ID" prop="id" label-width="100px">
          <el-input v-model="form.id" placeholder="请输入ID"/>
        </el-form-item>
        <el-form-item label="姓名" prop="cn" label-width="100px">
          <el-input v-model="form.cn" placeholder="请输入姓名"/>
        </el-form-item>
        <el-form-item label="账号名称" prop="sn" label-width="100px">
          <el-input v-model="form.sn" placeholder="请输入账号名称"/>
        </el-form-item>
        <el-form-item label="企微ID" label-width="100px" prop="weChatId">
          <el-input v-model="form.weChatId" placeholder="请输入企微ID"/>
        </el-form-item>
        <el-form-item label="电话" prop="phone" label-width="100px">
          <el-input v-model="form.phone" placeholder="请输入电话"/>
        </el-form-item>
        <el-form-item label="邮箱" prop="email" label-width="100px">
          <el-input v-model="form.email" placeholder="请输入邮箱"/>
        </el-form-item>
        <el-form-item label="员工类型" prop="employeeType" label-width="100px">
          <el-select v-model="form.employeeType" placeholder="请选择员工类型" default-first-option filterable>
            <el-option v-for="o in employeeType" :label="o.label" :value="o.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="部门" prop="depart" label-width="100px">
          <el-select
            v-model="form.depart" placeholder="请选择部门，可输入筛选" remote :remote-method="page" filterable
            allow-create default-first-option
          >
            <el-option
              v-for="item in departmentOptions[0]" :key="item.dn" :label="item.cn+','+item.ou"
              :value="item.cn"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="项目组" prop="center" label-width="100px">
          <el-select
            v-model="form.center" placeholder="请选择项目组或中心，可输入筛选" remote :remote-method="centerPage" filterable
            allow-create default-first-option
          >
            <el-option v-for="item in centerOptions[0]" :key="item.dn" :label="item.cn+','+item.ou" :value="item.cn"/>
          </el-select>
        </el-form-item>
        <el-form-item label="权限" label-width="100px">
          <permission-select v-model="form.userPermissions"/>
        </el-form-item>
        <el-form-item label="角色" label-width="100px">
          <role-multiple-select v-model="form.roles"/>
        </el-form-item>
        <el-form-item label="角色权限" label-width="100px">
          <permission-select v-model="form.rolePermissions" :read-only="true"/>
        </el-form-item>
        <el-form-item label="禁用状态" label-width="100px">
          <el-switch
            v-model="form.isDisable" :active-value="1" :inactive-value="0" active-text="禁用"
            inactive-text="启用"
          />
        </el-form-item>
      </el-form>

      <div style="height: 30px">
        <div style="float: right">
          <el-button v-if="id!==null" style="float:right;" type="primary" @click="updateUser">更新</el-button>
          <el-button v-if="id===null" style="float:right;" type="primary" @click="createUser">提交</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {create, detail as userDetail, update} from "@/api/system/user";
import {list} from "@/api/system/department";
import PermissionSelect from "@/views/system/permission/nameSelect.vue";
import RoleMultipleSelect from "@/views/system/role/roleMultipleSelect";

export default {
    name: "UpdateDialog",
    components: { RoleMultipleSelect, PermissionSelect },
    props: {
      visible: { type: Boolean, default: false },
      id: { type: Number, default: null }
    },

    data() {
      return {
        form: {
          dept: null
        },
        employeeType: [{ value: 'zy', label: '自有员工' }, { value: 'wb', label: '外包员工' }, { value: 'gj', label: '告警用户' }],
        rules: {
          cn: [{ required: true, trigger: 'blur' }],
          sn: [{ required: true, trigger: 'blur' }],
          weChatId: [{ required: true, trigger: 'blur' }],
          phone: [{ required: true, trigger: 'blur' }],
          email: [{ required: true, trigger: 'blur' }],
        },
        departmentOptions: [],
        department: {
          cn: null
        },
        centerOptions: [],
        center: {
          cn: null
        }
      }
    },
    watch: {
      'form.depart': {
        handler(val) {
          this.departmentOptions = []
          this.department = {
            ou: val,
            cn: val
          };
          list(this.department).then(res => {
            this.departmentOptions.push(res.data)
          })
        }, immediate: true
      },
      'form.center': {
        handler(val) {
          this.centerOptions = []
          this.center = {
            ou: val,
            cn: val
          };
          list(this.center).then(res => {
            this.centerOptions.push(res.data)
          })
        }, immediate: true
      },
    },

    methods: {
      page(query) {
        this.departmentOptions = []
        const department = {
          ou: query,
          cn: query
        }
        list(department).then(res => {
          this.departmentOptions.push(res.data)
        })
      },
      centerPage(query) {
        this.centerOptions = []
        const center = {
          ou: query,
          cn: query
        }
        list(center).then(res => {
          this.centerOptions.push(res.data)
        })
      },

      updateUser() {
        update(this.form).then(() => {
          this.$message({ type: 'success', message: '更新用户成功' })
          this.$parent.page()
          this.$parent.updateDialogVisible = false
        })
      },
      createUser() {
        create(this.form).then(() => {
          this.$message({ type: 'success', message: '添加用户成功' })
          this.$parent.page()
          this.$parent.updateDialogVisible = false
        })
      },

      open() {
        if (this.id === null) {
          this.form = {}
        } else {
          userDetail(this.id).then(res => {
            this.form = res.data
          })
        }
      },

      close() {
        this.$parent.updateDialogVisible = false
      }
    }
  }
</script>

<style scoped>
</style>
